<template>
    <div>
        <!-- 全屏广告 -->
        <div class="advert" v-show="advert">
            <img src="https://easyreadfs.nosdn.127.net/EwDS9h-WJhjxsXIwzUZgXg==/8796093025060935621#640960" alt="">
            <div class="jump"><span @click="btnAdvert">跳过{{time}}</span></div>
        </div>

        <!-- 加载动画 -->
        <div class="load" v-show="!content&&!advert">
            <div class="load-content">
                <van-loading type="spinner" color="#1989fa" size="50px"/>
            </div>
        </div>

        <!-- 书籍内容 上下滑动效果-->
        <div :class="bookcolor" v-if="content&&!advert&&hide" @click="btnChange">
            <div class="nav-content-header" v-if="content&&!advert" v-show="toolshow">
                <div class="nav-content-left" @click="goFirst"><svg t="1640332983195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94351" width="12" height="12"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#2c2c2c" p-id="94352"></path></svg>{{listtitle}}</div>
                <div class="nav-content-right" @click="showPopup">目录</div>
            </div>
            <div v-html="content" :class="bookcon" v-if="content&&!advert" ref="topContent">{{content}}</div>

            <!-- 下一章,上一章 -->
            <div class="next" v-if="content&&!advert" v-show="toolshow">
                <div class="next-left" @click="btnFirst">上一章</div>
                <div class="next-tool" @click="btnTool">设置</div>
                <div class="next-right" @click="btnNext">下一章</div>
            </div>


            <!-- 设置 --> 
            <van-popup round v-model="showtwo" position="bottom" :style="{ height: '30%' }" >
                <div class="book-tool">
                    <!-- 字体大小 -->
                    <div class="book-font-size">
                        <p>字体:</p>
                        <span @click="btnBig">大</span>
                        <span @click="btnCenter">中</span>
                        <span @click="btnSmall">小</span>
                    </div>
                    <!-- 夜间模式 -->
                    <div class="book-read-model">
                        <p>模式:</p>
                        <span @click="btnEye">护眼</span>
                        <span @click="btnNight">夜间</span>
                        <span @click="btnDay">白天</span>
                    </div>
                    <!-- 翻页模式 -->
                    <div class="book-change-model">
                        <p>翻页</p>
                        <span @click="upDown">上下翻页</span>
                        <span @click="aboutAll">左右翻页</span>
                    </div>
                </div>
            </van-popup> 

            <!-- 目录 -->
            <van-popup round v-model="show" position="right" :style="{ height: '100%', width:'60%' }" >
                <ul class="content-btn-list">
                    <li v-for="(item,index) in contentlist" :key="index" @click="jump(index)">{{item.title}}</li>
                </ul>
            </van-popup>
        </div>



        <!-- 书籍内容 左右翻页效果 -->
        <div :class="bookcolor" v-if="content&&!advert&&!hide" @click="btnChange">
            <div class="nav-content-header" v-if="content&&!advert" v-show="toolshow">
                <div class="nav-content-left" @click="goFirst"><svg t="1640332983195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="94351" width="12" height="12"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#2c2c2c" p-id="94352"></path></svg>{{listtitle}}</div>
                <div class="nav-content-right" @click="showPopup">目录</div>
            </div>
            <div class="nav-about-content" @touchmove="move" @touchstart="movestart" @touchend="moveEnd">
                <div v-html="content" :class="[bookcon,about]" v-if="content&&!advert" :style="{'left':this.distance}" ref="box">{{content}}</div>
            </div>
            

            <!-- 下一章,上一章 -->
            <div class="next" v-if="content&&!advert" v-show="toolshow">
                <div class="next-left" @click="btnFirst">上一章</div>
                <div class="next-tool" @click="btnTool">设置</div>
                <div class="next-right" @click="btnNext">下一章</div>
            </div>


            <!-- 设置 --> 
            <van-popup round v-model="showtwo" position="bottom" :style="{ height: '30%' }" >
                <div class="book-tool">
                    <!-- 字体大小 -->
                    <div class="book-font-size">
                        <p>字体:</p>
                        <span @click="btnBig">大</span>
                        <span @click="btnCenter">中</span>
                        <span @click="btnSmall">小</span>
                    </div>
                    <!-- 夜间模式 -->
                    <div class="book-read-model">
                        <p>模式:</p>
                        <span @click="btnEye">护眼</span>
                        <span @click="btnNight">夜间</span>
                        <span @click="btnDay">白天</span>
                    </div>
                    <div class="book-change-model">
                        <p>翻页</p>
                        <span @click="upDown">上下翻页</span>
                        <span @click="aboutAll">左右翻页</span>
                    </div>
                </div>
            </van-popup> 

            <!-- 目录 -->
            <van-popup round v-model="show" position="right" :style="{ height: '100%', width:'40%' }" >
                <ul class="content-btn-list">
                    <li v-for="(item,index) in contentlist" :key="index" @click="jump(index)">{{item.title}}</li>
                </ul>
            </van-popup>
        </div>

    </div>
</template>

<script>
import Vue from 'vue';
import { Loading,Toast } from 'vant';

Vue.use(Loading,Toast);
import {getBookContent,getCatalogue} from "../../api/bookdetail"
export default {
    props:['coin','bookids'],
    data(){
        return {
            index:0,
            content:null,
            listtitle:null,
            contentid:null,
            contentlist:null,
            show: false,
            showtwo:false,
            bookcon:'center-content',
            bookcolor:'day',
            toolshow:false,
            advert:true,
            time:5,
            temp:null,
            hide:true,//实验用的,完成后去掉
            movex:null,//判断向左向右移动
            movey:null,//滑动开始的位置
            distance:0,//移动距离
            counts:0,//计数
            about:'aboutcontent',
            session:[],//存储数据
            feecontent:null,//免费章节
        }
    },
    methods:{
        //上下翻页
        upDown(){
            this.hide=true
            Toast('上下翻页')
        },
        //左右翻页
        aboutAll(){
            this.hide=false
            Toast('左右翻页')
        },
        
        //只显示一次滑动
        moveEnd(){    
            // this.movey=e.changedtouches.clientX
            // console.log('盒子宽度',this.$refs.box.scrollWidth)
            if(this.movex-this.movey>0){
                if(this.counts<0){
                    // console.log('向左滑动')
                    this.counts+=1
                }else{
                    Toast('已是第一页')
                }
            }else{
                if(Math.abs(this.counts*375)<(this.$refs.box.scrollWidth-375)){
                    console.log('向右滑动')
                    this.counts-=1
                }else{
                    Toast('已是最后一页')
                }
            }
        },

        //滑动开始的效果
        movestart(e){
            this.movey=e.touches[0].clientX
        },

        //左右翻页效果实现
        move(e){
            this.movex = e.touches[0].clientX
            // console.log(this.movex)
        },

        //跳过广告
        btnAdvert(){
            this.advert=false
        },

        //显示工具
        btnChange(){
            this.toolshow=!this.toolshow
        },

        //护眼模式
        btnEye(){
            this.bookcolor='eye-protection'
        },
        //白天模式
        btnDay(){
            this.bookcolor='day'
        },
        //夜间模式
        btnNight(){
            this.bookcolor='night'
        },
        //大字体
        btnBig(){
            this.bookcon='big-content'
        },
        //中字体
        btnCenter(){
            this.bookcon='center-content'
        },
        //小字体
        btnSmall(){
            this.bookcon='small-content'
        },
        btnTool(){
            this.showtwo=true
        },
        //目录跳转
        jump(indexs){
            if(indexs>9){
                if(this.coin-5>=0){
                    this.$emit('get-sum',5)
                    this.index=indexs
                    this.show=false
                    Toast('购买成功')
                }else{
                    Toast('余额不足,请充值')
                }
            }else{
                this.index=indexs
                this.show=false
            }
            
        },
        showPopup() {
            this.show = true;
        },
        //回到上一个页面
        goFirst(){
            // this.$router.push({name:'bookdetail',params:{ids:this.bookid}})
            // console.log('书籍id',this.bookid)
            this.$router.go(-1)
        },
        //上一章
        btnFirst(){
            if(this.index==0){
                Toast('已是第一章');
            }else{
                this.index-=1;
            }
        },
        //下一章
        btnNext(){
            if(this.index==this.contentlist.length-1){
                Toast('已是最新章节');
            }else if(this.index>9){
                if(this.coin-5>0){
                    this.$emit('get-sum',5)
                    this.index+=1
                    Toast('购买成功')
                }else{
                    Toast('余额不足,请充值')
                }
            }else{
                this.index+=1;
            }
            
            
        }
    },
    created(){
        
        getBookContent({
            source_uuid:this.$route.params.id,
            content_uuid:this.$route.params.uid
        }).then(data=>{
            this.content=data.data.content
            // console.log('书籍内容',data)
        })
        getCatalogue({
            source_uuid:this.$route.params.id
        }).then(data=>{
            this.contentlist=data.data.catalog
            this.listtitle=data.data.catalog[this.index].title
            // console.log('目录',this.contentlist)
                getBookContent({
                    source_uuid:this.$route.params.id,
                    content_uuid:this.contentlist[0].secId
                }).then(data=>{
                    // this.content=data.data.content
                    // console.log('存储数据',data)
                    this.session.push(data.data.content)
                    // sessionStorage.setItem("fee",JSON.stringify(this.session));
                    getBookContent({
                        source_uuid:this.$route.params.id,
                        content_uuid:this.contentlist[1].secId
                    }).then(data=>{
                        // this.content=data.data.content
                        // console.log('存储数据',data)
                        this.session.push(data.data.content)
                        // sessionStorage.setItem("fee",JSON.stringify(this.session));
                        getBookContent({
                            source_uuid:this.$route.params.id,
                            content_uuid:this.contentlist[2].secId
                        }).then(data=>{
                            // this.content=data.data.content
                            // console.log('存储数据',data)
                            this.session.push(data.data.content)
                            // sessionStorage.setItem("fee",JSON.stringify(this.session));
                            getBookContent({
                                source_uuid:this.$route.params.id,
                                content_uuid:this.contentlist[3].secId
                            }).then(data=>{
                                // this.content=data.data.content
                                // console.log('存储数据',data)
                                this.session.push(data.data.content)
                                // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                getBookContent({
                                    source_uuid:this.$route.params.id,
                                    content_uuid:this.contentlist[4].secId
                                }).then(data=>{
                                    // this.content=data.data.content
                                    // console.log('存储数据',data)
                                    this.session.push(data.data.content)
                                    // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                    getBookContent({
                                        source_uuid:this.$route.params.id,
                                        content_uuid:this.contentlist[5].secId
                                    }).then(data=>{
                                        // this.content=data.data.content
                                        // console.log('存储数据',data)
                                        this.session.push(data.data.content)
                                        // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                        getBookContent({
                                            source_uuid:this.$route.params.id,
                                            content_uuid:this.contentlist[6].secId
                                        }).then(data=>{
                                            // this.content=data.data.content
                                            // console.log('存储数据',data)
                                            this.session.push(data.data.content)
                                            // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                            getBookContent({
                                                source_uuid:this.$route.params.id,
                                                content_uuid:this.contentlist[7].secId
                                            }).then(data=>{
                                                // this.content=data.data.content
                                                // console.log('存储数据',data)
                                                this.session.push(data.data.content)
                                                // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                                getBookContent({
                                                    source_uuid:this.$route.params.id,
                                                    content_uuid:this.contentlist[8].secId
                                                }).then(data=>{
                                                    // this.content=data.data.content
                                                    // console.log('存储数据',data)
                                                    this.session.push(data.data.content)
                                                    // sessionStorage.setItem("fee",JSON.stringify(this.session));
                                                    getBookContent({
                                                        source_uuid:this.$route.params.id,
                                                        content_uuid:this.contentlist[9].secId
                                                    }).then(data=>{
                                                        // this.content=data.data.content
                                                        // console.log('存储数据',data)
                                                        this.session.push(data.data.content)
                                                        sessionStorage.setItem("fee",JSON.stringify(this.session));
                    
                                                    })
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })



            // for(var i=0;i<10;i++){
            //     getBookContent({
            //         source_uuid:this.$route.params.id,
            //         content_uuid:this.contentlist[i].secId
            //     }).then(data=>{
            //         // this.content=data.data.content
            //         console.log('存储数据',data)
            //         this.session.push(data.data.content)
            //         sessionStorage.setItem("fee",JSON.stringify(this.session));
                    
            //     })
            // }


            // for(let i=0;i<10;i++){
            //     getBookContent({
            //         source_uuid:this.$route.params.id,
            //         content_uuid:this.contentlist[i].secId
            //     }).then(data=>{
            //         // this.content=data.data.content
            //         console.log('存储数据',data)
            //         this.session.push({id:i,con:data.data.content})
            //         sessionStorage.setItem("fee",JSON.stringify(this.session));
                    
            //     })
            // }
            
            var feelist=JSON.parse(sessionStorage.getItem("fee"))
            console.log('获取本地存储的数据',feelist)
            this.feecontent=feelist
        })
        

        //存储10条数据到sessionStorage里面
        

        //获取session里面的数据
    },
    //设置自动跳转广告
    mounted(){
        this.temp=setInterval(()=>{
            this.time--;
            if(this.time==0){
                clearTimeout(this.temp)
                this.advert=false
            }
        },1000)
    },
    watch:{
        index:function(){
            // console.log('变化时滚到顶部',this.$refs.topContent.offsetTop)
            // this.$refs.topContent.scrollBy=(0,0)
            this.distance=0
            this.counts=0
            this.content=null
            if(this.index<10){
                setTimeout(()=>{
                    this.content=this.feecontent[this.index]
                },10)
                
            }else{
                getCatalogue({
                    source_uuid:this.$route.params.id
                }).then(data=>{
                    this.contentid=data.data.catalog[this.index].secId
                    this.listtitle=data.data.catalog[this.index].title
                    //目录列表加减
                    getBookContent({
                        source_uuid:this.$route.params.id,
                        content_uuid:this.contentid
                    }).then(data=>{
                        this.content=data.data.content
                        // console.log('书籍内容',data)
                    })
                })
            }
            getCatalogue({
                source_uuid:this.$route.params.id
            }).then(data=>{
                this.contentid=data.data.catalog[this.index].secId
                this.listtitle=data.data.catalog[this.index].title
            })
            
            

            

        },
        counts:function(){
            if(this.counts>0){
                Toast('已是第一页')
            }else{
                if(Math.abs(this.counts*375)>=this.$refs.box.scrollWidth){
                    Toast('已是最后一页')
                }else{
                    this.distance=this.counts*375+'px'
                    // console.log(this.distance)
                }
                
            }
            
        },
        
    }
}
</script>

<style lang="less" scoped>

.day{
    background-color: white;
    width: 375px;
    height: 667px;
    overflow: auto;
}
.eye-protection{
    background-color: #c1b094;
    width: 375px;
    height: 667px;
    overflow: auto;
}
.night{
    background-color: #051c2c;
    color: #5c6e7a;
    width: 375px;
    height: 667px;
    overflow: auto;
}

//护眼 #c1b094

//白天 white

//夜间 #051c2c 字体:#5c6e7a

.load{
    width: 375px;
    height: 667px;
    display: flex;
    justify-content: center;
    align-items: center;
    .load-content{
        width: 50px;
        height: 50px;
    }
}

.nav-content-header{
    width: 375px;
    height: 44px;
    position: fixed;
    z-index: 3;
    // border: 1px solid red;
    // margin-top: -16px;
    top: 0px;
    padding: 0;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav-content-left{
        font-size: .75rem;
        padding-left: 10px;
    }
    .nav-content-right{
        font-size: .75rem;
        padding-right: 10px;
    }
}

//大字体
.big-content{

                /deep/h1{
                    // margin-top: 30px;
                    line-height: 1.2;
                    font-size: 30px;
                    padding-top: 16px;
                    margin-left: 5px;
                }
                /deep/p{
                    width: 355px;
                    padding: 10px 10px;
                    text-indent:2em;
                    font-size: 20px;
                }
            
    
}

//中字体
.center-content{

                /deep/h1{
                    // margin-top: 30px;
                    line-height: 1.2;
                    font-size: 1.5em;
                    padding-top: 16px;
                    margin-left: 5px;
                }
                /deep/p{
                    width: 355px;
                    padding: 10px 10px;
                    text-indent:2em;
                }
            
    
}

//小字体
.small-content{

                /deep/h1{
                    // margin-top: 30px;
                    line-height: 1.2;
                    font-size: 18px;
                    padding-top: 16px;
                    margin-left: 5px;
                }
                /deep/p{
                    width: 355px;
                    padding: 10px 10px;
                    text-indent:2em;
                    font-size: 12px;
                }
            
    
}


// 上下章节
.next{
    width: 375px;
    height: 40px;
    background-color: white;
    position: fixed;
    z-index: 3;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .next-left{
        width: 100px;
        height: 30px;
        margin-left: 20px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 30px;
    }
    .next-tool{
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 30px;
    }
    .next-right{
        width: 100px;
        height: 30px;
        margin-right: 20px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 30px;
    }
}

//设置
.book-tool{
    width: 300px;
    height: 100px;
    margin: 20px auto;
    .book-font-size{
        width: 300px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            display: block;
            width: 50px;
            height: 30px;
            border-radius: 30px;
            border: 1px solid rgb(165, 161, 161);
            text-align: center;
            line-height: 30px;
        }
    }
    .book-read-model{
        width: 300px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            display: block;
            width: 50px;
            height: 30px;
            border-radius: 30px;
            border: 1px solid rgb(165, 161, 161);
            text-align: center;
            line-height: 30px;
        }
    }
    .book-change-model{
        width: 300px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            display: block;
            width: 100px;
            height: 30px;
            border-radius: 30px;
            border: 1px solid rgb(165, 161, 161);
            text-align: center;
            line-height: 30px;
        }
    }
}

//左右翻页效果
.nav-about-content{
    width: 375px;
    height: 667px;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 0px;
    // position: fixed;
    // top: 0;
    // left: 0;
    // transform: translate(375px, 0px);
    .aboutcontent{
        position: absolute;
        height: 667px;
        margin: 0px;
        padding: 0px;
        column-count: 1;
        column-gap: 0px;
    }
}




//目录
.content-btn-list{
    width: 100%;
    margin-top: 10px;
    li{
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        padding: 5px 0px;
        padding-left: 10px;
        color: rgb(153, 152, 152);
    }
}



//全屏广告
.advert{
    width: 375px;
    height: 667px;
    position: relative;
    img{
        position: absolute;
        z-index: 4;
        width: 100%;
        height: 100%;
    }
    .jump{
        width: 60px;
        height: 20px;
        position: absolute;
        z-index: 5;
        border: 1px solid white;
        background-color: black;
        color: white;
        font-size: 10px;
        text-align: center;
        line-height: 20px;
        border-radius: 20px;
        bottom: 50px;
        right: 20px;
    }
}
</style>